<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">采购订单详情</p>
    </div>
    <div class="view-container">
      <el-row class="status-title">
        <el-col class="mr20 width100" v-if="detailData.approvalStatus == '0'">
          <template v-if="detailData.status !== '9'">
            <el-button
              class="btn-default width100"
              type="primary"
              @click="audit()"
              v-hasPermi="['system:purchaseOrder:approve']"
            >审核</el-button>
          </template>
        </el-col>
        <el-col class="mr20 width100" v-if="detailData.approvalStatus == '1' && this.store == 0">
          <template v-if="detailData.status !== '9'">
            <el-button
              class="btn-audit width100"
              type="primary"
              @click="reverseAudit()"
              v-hasPermi="['system:purchaseOrder:approve']"
            >反审核</el-button>
          </template>
        </el-col>
        <el-col class="mr20 width100" v-if="detailData.approvalStatus == '2' || detailData.approvalStatus == '3' || detailData.status == '0'">
          <template v-if="detailData.status !== '9'">
            <el-button
              class="btn-default width100"
              type="primary"
              @click="edit()"
              v-hasPermi="['system:purchaseOrder:update']"
            >编辑</el-button>
          </template>
        </el-col>
        <el-col class="mr20 width100" v-if="detailData.approvalStatus == '1'">
          <el-button
            class="btn-scanCodeDel"
            type="primary"
            icon="el-icon-download"
            @click="btnPrint()"
          >打印</el-button>
        </el-col>
        <el-col :span="10" class="status-container">
          <div class="status-item">
            <span :class="{ 'active' : detailData.approvalStatus == 0 }">待审核</span>
            <span :class="{ 'active' : detailData.approvalStatus == 1 }">已审核</span>
            <span :class="{ 'active' : detailData.approvalStatus == 2 }">反审核</span>
            <span :class="{ 'active' : detailData.approvalStatus == 3 }">拒绝</span>
          </div>
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="8">
          <span>采购订单编码：</span>{{ detailData.purchaseOrderCode ?  detailData.purchaseOrderCode : '暂无'}}
        </el-col>
        <el-col :span="8">
          <span>业务日期：</span>{{ detailData.businessDate ?  detailData.businessDate : '暂无'}}
        </el-col>
      </el-row>
      <template v-if="detailData.orderType !== '1'">
        <el-row class="detail-item">
          <el-col :span="8">
            <span>供应商名称：</span>{{ detailData.supplierName ?  detailData.supplierName : '暂无'}}
          </el-col>
          <el-col :span="8">
            <span>业务部门：</span>{{ detailData.businessUnit ?  detailData.businessUnit : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
            <span>发票类型：</span>{{ detailData.invoiceType ?  detailData.invoiceType : '暂无'}}
          </el-col>
          <el-col :span="8">
            <span>业务模式：</span>{{ detailData.businessModel ?  detailData.businessModel : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
            <span>上传附件：</span>
            <div style="width:100%;">
              <template v-if="JSON.stringify(detailData.shareFiles) !== '[]' && detailData.shareFiles !== null">
                <div v-for="item in detailData.shareFiles" :key="item.id">
                  <template v-if="item.fileType == '.jpg' || item.fileType == '.jpeg' || item.fileType == '.png' || item.fileType == '.gif' || item.fileType == '.bmp' ">
                    <img :src="item.fileUrl" class="item-img">
                  </template>
                  <template v-else>
                    {{ item.fileName }}
                  </template>
                </div>
              </template>
              <template v-else>暂无</template>
            </div>
          </el-col>
          <el-col :span="8">
            <span>备注：</span>{{ detailData.remark ?  detailData.remark : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
            <span>审核状态：</span>
            <font v-if="detailData.approvalStatus == 0" style="color:#13C2C2">待审核</font>
            <font v-if="detailData.approvalStatus == 1" style="color:#52C41A">已审核</font>
            <font v-if="detailData.approvalStatus == 2" style="color:#fd562c">反审核</font>
            <font v-if="detailData.approvalStatus == 3" style="color:#fd562c">拒绝</font>
          </el-col>
        </el-row>
        <!-- <el-row class="detail-item">
          <el-col :span="8">
            <span>上游销售单：</span>{{ detailData.downOrderNumber ?  detailData.downOrderNumber : '暂无'}}
          </el-col>
          <el-col :span="8">
            <span>下游销售单：</span>{{ detailData.upOrderNumber ?  detailData.upOrderNumber : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
            <span>上游审核结果：</span>{{ detailData.downOrderRemark == '0' ?  '待审核' : detailData.downOrderRemark == '1' ? '已审核' : detailData.downOrderRemark == '2' ? '反审核' : detailData.downOrderRemark == '3' ? '拒绝' : '暂无'}}
          </el-col>
          <el-col :span="8">
            <span>审核意见：</span>{{ detailData.upOrderRemark ?  detailData.upOrderRemark : '暂无'}}
          </el-col>
        </el-row> -->
      </template>
      <el-row class="detail-item">
        <el-col :span="24">
          <el-table :data="detailData.purchaseOrderProductList" border>
            <el-table-column label="序号" type="index" align="center" width="50" />
            <el-table-column :label="item.label" :prop="item.prop" :width="item.width" v-for="(item, index) in columns" :key="index" align="center">
              <template slot-scope="scope">
                <template v-if="item.type == 'gift'">
                  {{ scope.row[item.prop] == '0' ? '否' : scope.row[item.prop] == '1' ? '是' : '' }}
                </template>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="8">
          <span>合计数量：</span>{{ detailData.totalNum ?  detailData.totalNum : '暂无'}}
        </el-col>
        <el-col :span="8">
          <span>合计未税金额：</span>{{ detailData.totalAmount ?  detailData.totalAmount : '暂无'}}
        </el-col>
        <el-col :span="8">
          <span>合计价税合计：</span>{{ detailData.totalTaxAmount ?  detailData.totalTaxAmount : '暂无'}}
        </el-col>
      </el-row>
    </div>
    <!-- 审核/反审核 -->
    <el-dialog :visible.sync="open" width="500" top="100px" append-to-body title="审核意见" center>
      <el-row>
        <el-col :span="24">
          <textarea
            class="approve-textarea"
            v-model="approveRemark"
            type="textarea"
            placeholder="请输入意见和看法"
          >
          </textarea>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="btn-success mr20 width100"
          @click="agreeApprove()"
        >同意</el-button>
        <el-button
          type="primary"
          class="btn-cancel width100"
          @click="disagreeApprove()"
        >拒绝</el-button>
      </div>
    </el-dialog>
    <!-- 打印 -->
    <div ref="print" style="position:absolute;left:0;right:0;z-index:-999;">
      <h1 style="font-size:20px;text-align:center;margin-bottom:20px;">采购单</h1>
      <p style="display:flex;font-size:14px;line-height:40px;">
        <span style="flex:1;align-items:flex-end;">采购订单编码：{{ detailData.purchaseOrderCode }}</span>
        <span style="flex:1;align-items:flex-end;">业务日期：{{ detailData.businessDate }}</span>
      </p>
      <p style="display:flex;font-size:14px;line-height:40px;">
        <span style="flex:1;align-items:flex-end;">供应商名称：{{ detailData.supplierName }}</span>
        <span style="flex:1;align-items:flex-end;">到货日期：{{ detailData.arrivalDate ?  detailData.arrivalDate : '暂无' }}</span>
      </p>
      <p style="display:flex;font-size:14px;line-height:40px;">
        <span style="flex:1;align-items:flex-end;">发票类型：{{ detailData.invoiceType }}</span>
      </p>
      <table style="font-size:14px;margin-top:10px;width:100%;border:1px solid #000;border-collapse:collapse;border-top:none;border-right:none;">
        <tr>
          <th width="20%" style="border:1px solid #000;border-left:none;padding:10px 0;">产品编码</th>
          <th width="20%" style="border:1px solid #000;border-left:none;padding:10px 0;">产品名称</th>
          <th width="15%" style="border:1px solid #000;border-left:none;padding:10px 0;">规格</th>
          <th width="15%" style="border:1px solid #000;border-left:none;padding:10px 0;">批次</th>
          <th width="10%" style="border:1px solid #000;border-left:none;padding:10px 0;">数量</th>
          <th width="10%" style="border:1px solid #000;border-left:none;padding:10px 0;">单位</th>
          <th width="10%" style="border:1px solid #000;border-left:none;padding:10px 0;">金额</th>
        </tr>
        <tr v-for="item in detailData.purchaseOrderProductList" :key="item.id">
          <td width="20%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.productCode }}</td>
          <td width="20%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.productName }}</td>
          <td width="15%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.specification }}</td>
          <td width="15%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.batch }}</td>
          <td width="10%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.num }}</td>
          <td width="10%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.unit }}</td>
          <td width="10%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.amount }}</td>
        </tr>
      </table>
      <p style="display:flex;font-size:14px;line-height:40px;">
        <span style="flex:1;align-items:flex-end;">合计数量：{{ detailData.totalNum }}</span>
        <span style="flex:1;align-items:flex-end;">合计金额：{{ detailData.totalAmount }}</span>
      </p>
    </div>
  </div>
</template>

<script>
import { orderDetail, orderApprove } from "@/api/system/purchaseOrder/order"
export default {
  name: "orderDetail",
  data(){
    return {
      columns: [{
        prop: "productBasicCode",
        label: "产品编码",
        width: 160,
      },{
        prop: "productBasicName",
        label: "产品名称",
        width: 200,
      },{
        prop: "productCode",
        label: "SKU编码",
        width: 160,
      },{
        prop: "productName",
        label: "SKU名称",
        width: 200,
      },{
        prop: "specification",
        label: "规格",
        width: 100,
      },{
        prop: "batch",
        label: "批次",
        width: 150,
      },{
        prop: "num",
        label: "数量",
        width: 120,
      },{
        prop: "unit",
        label: "单位",
        width: 100,
      },{
        prop: "arrivalDate",
        label: "预计到货日期",
        width: 160,
      },{
        prop: "untaxedAmount",
        label: "未税单价",
        width: 100,
      },{
        prop: "taxUnitPrice",
        label: "含税单价",
        width: 100,
      },{
        prop: "amount",
        label: "未税金额",
        width: 120,
      },{
        prop: "taxRate",
        label: "税率(%)",
        width: 80,
      },{
        prop: "levy",
        label: "税款",
        width: 100,
      },{
        prop: "totalTax",
        label: "价税合计",
        width: 120,
      },{
        prop: "isGift",
        label: "赠品",
        width: 80,
        type: 'gift'
      },
      // {
      //   prop: "requisitionNumber",
      //   label: "关联申请单号",
      //   width: 100,
      // },
      {
        prop: "warehouseCount",
        label: "实际入库",
        width: 100,
      },{
        prop: "remark",
        label: "备注",
        width: 200,
      }],
      id: '',
      detailData: '',
      open: false,
      approveRemark: '',
      store: '',
      oldApprovalStatus: ''
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getDetailData()
  },
  methods: {
    // 获取详细信息
    getDetailData(){
      orderDetail(this.id).then(res => {
        this.detailData = res.data
        this.oldApprovalStatus = res.data.approvalStatus
        if(res.data.purchaseOrderProductList !== null){
          let store = 0
          res.data.purchaseOrderProductList.forEach(item => {
              store += Number(item.warehouseCount)
              return store
          })
          this.store = store
        }
      })
    },
    // 审核
    audit(){
      this.open = true
    },
    agreeApprove(){
      orderApprove(this.id, 2, '1', this.oldApprovalStatus, this.approveRemark).then(res => {
        if(res.code == 200){
          this.getDetailData()
          this.open = false
          this.$modal.msgSuccess("操作成功")
        }
      })
    },
    disagreeApprove(){
      orderApprove(this.id, 0, '3', this.oldApprovalStatus, this.approveRemark).then(res => {
          if(res.code == 200){
            this.getDetailData()
            this.open = false
            this.$modal.msgSuccess("操作成功")
          }
      })
    },
    // 反审核
    reverseAudit(){
      this.$modal.confirm('是否确认反审核？', '反审核').then(() => {
        orderApprove(this.id, 0, '2', this.oldApprovalStatus).then(res => {
          if(res.code == 200){
            this.getDetailData()
            this.$modal.msgSuccess("操作成功")
          }
        })
      }).catch(() => {})
    },
    // 编辑
    edit(){
      this.$tab.closeOpenPage({ path: "/purchase/purchaseOrder/edit", query:{id: this.id} })
    },
    // 打印
    btnPrint(){
      this.$print(this.$refs.print)
    }
  }
}
</script>

<style scoped>
.item-img{
  float: left;
  margin:0 10px 10px 0;
  width: 145px;
  height: 145px;
  overflow: hidden;
}
.item-img img{
  width: 100%;
}
</style>
